<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Counter</title>
    <meta name="viewport" content="width=device-width">
    <style>
        .container {
            width: 450px;
            margin: 0 auto;
            text-align: center;
        }

        .gauge {
            width: 450px;
            height: 450px;
        }

        a:link.button,
        a:active.button,
        a:visited.button,
        a:hover.button {
            margin: 30px 5px 0 2px;
            padding: 7px 13px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="g1" class="gauge"></div>
        <a href="#" id="g1_refresh">Random Refresh</a>
    </div>
    <script src="../raphael.min.js"></script>
    <script src="../justgage.js"></script>
    <script>
        var g1;
        /** Random integer  */
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        document.addEventListener("DOMContentLoaded", function (event) {
            g1 = new JustGage({
                id: "g1",
                title: "Font Options",
                value: 72,
                min: 0,
                minTxt: "min",
                max: 100,
                maxTxt: "max",
                gaugeWidthScale: 0.6,
                counter: true,
                titleFontColor: "red",
                titleFontFamily: "Georgia",
                titlePosition: "below",
                valueFontColor: "blue",
                valueFontFamily: "Georgia"
            });

            document.getElementById('g1_refresh').addEventListener('click', function () {
                g1.refresh(getRandomInt(0, 100));
            });
        });
    </script>
</body>

</html>